<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">
    
    <ui:define name="head">
        <script type="text/javascript">
//<![CDATA[
    function handleForm(xhr,status,args) {
        if(args.validationFailed)
            PF('spot').show();
        else
            PF('spot').hide();
    }
//]]>
		</script>

	</ui:define>


    <ui:define name="title">
        Spotlight
    </ui:define>

    <ui:define name="description">
        Spotlight highlights a certain component on page.
    </ui:define>

    <ui:param name="documentationLink" value="/components/spotlight" />

    <ui:define name="implementation">
        Panel is highlighted on validation error.
        
        <h:form>  
            <p:growl id="growl" />

            <p:panel id="pnl" header="New User" style="margin-top:10px">
                <p:messages id="messages" />
                <h:panelGrid columns="3" id="grid" cellpadding="5">
                    <p:outputLabel for="username" value="Username" />
                    <p:inputText id="username" value="#{spotlightView.username}" required="true">
                        <f:validateLength minimum="2" />
                    </p:inputText>
                    <p:message for="username" />

                    <p:outputLabel for="email" value="Surname:" />
                    <p:inputText id="email" value="#{spotlightView.email}" required="true"/>
                    <p:message for="email" />
                </h:panelGrid>

                <p:commandButton value="Save" icon="pi pi-check" action="#{spotlightView.save}" update="growl grid" oncomplete="handleForm(xhr, status, args)"/>
            </p:panel>

            <p:spotlight target="pnl" widgetVar="spot"/>
        </h:form>
        
    </ui:define>

</ui:composition>